<template>
  <div
    class="right-panel"
    :style="{ width: `${panelWidth}px`, padding: panelWidth > 0 ? '24px' : 0 }"
  >
    <div v-if="Object.keys(newCurrentItem).length">
      <div class="title">{{ newCurrentItem.name }}</div>
      <!-- 数字相关 -->
      <div class="box" v-if="newCurrentItem.tip">
        <div class="title2">
          <div>{{ newCurrentItem.tip }}</div>
        </div>
      </div>
      <!-- 字段名 -->
      <div class="box" v-if="newCurrentItem.id">
        <div class="title2">字段名</div>
        <el-input :model-value="newCurrentItem.id" @input="rightPanelChange($event, 'id')" />
      </div>
      <!-- 通用 -->
      <div v-if="!['date-range', 'explain'].includes(type)" class="box">
        <div class="title2">
          <span>标题</span>
        </div>
        <el-input :model-value="newCurrentItem.name" @input="rightPanelChange($event, 'name')" />
      </div>
      <!-- 日期区间相关 -->
      <div v-if="['date-range'].includes(type)">
        <div class="box" v-for="i in 3" :key="i">
          <div class="title2">
            <span>{{ `控件名称${i}` }}</span>
          </div>
          <el-input
            :model-value="newCurrentItem.options[`label${i}`]"
            @input="rightPanelChangeDefaultValue($event, `label${i}`)"
          />
        </div>
      </div>
      <div class="box" v-if="!['explain'].includes(type)">
        <div class="title2">默认提示</div>
        <el-input
          :model-value="newCurrentItem.options.placeholder"
          @input="rightPanelChangeDefaultValue($event, 'placeholder')"
        />
      </div>
      <!-- 说明相关 -->
      <div class="box" v-if="['explain'].includes(type)">
        <div class="title2">默认提示</div>
        <el-input
          type="textarea"
          :model-value="newCurrentItem.options.defaultValue"
          @input="rightPanelChangeDefaultValue($event, 'defaultValue')"
        />
      </div>
      <div class="box" v-if="type === 'amount'">
        <div class="title2">币种</div>
        <el-input
          :model-value="newCurrentItem.options.appendSlotContent"
          @input="rightPanelChangeDefaultValue($event, 'appendSlotContent')"
        />
      </div>
      <!-- 日期区间相关 -->
      <div class="box" v-if="type === 'date-range'">
        <div class="title2">时长</div>
        <el-checkbox v-model="newCurrentItem.options.label3CanEidt" label="允许修改" />
        <el-popover
          placement="top"
          effect="dark"
          trigger="hover"
          content="人员发起申请时，可修改自动计算的时长"
        >
          <template #reference>
            <i
              style="margin-left: 5px; position: relative; bottom: 1px"
              class="iconfont icon-question-circle"
            ></i>
          </template>
        </el-popover>
      </div>
      <!-- 单选/多选 选项有关 -->
      <div class="box" v-if="['single-select', 'multiple-select'].includes(type)">
        <div class="title2">
          <span>选项</span>
        </div>
        <draggable tag="ul" :list="newCurrentItem.options.selectOptions" handle=".handle" item-key="name">
          <template #item="{ element, index }">
            <li class="flex-box drag-li">
              <i class="iconfont icon icon-yidongshu handle"></i>
              <el-input
                :class="{
                  'is-error': !element.label
                }"
                class="divider-input2"
                v-model="element.value"
                @input="
                  () => {
                    element.label = element.value
                    // formStore.computeErrorContent()
                  }
                "
              />
              <el-icon style="cursor: pointer" :size="20" @click="closeSelectOption(index)">
                <Close />
              </el-icon>
            </li>
          </template>
        </draggable>
        <div class="over-tip" v-show="judgeOptionFix">选项的值不能为空</div>
        <div class="operate" @click="newCurrentItem.options.selectOptions.push({ label: '', value: '' })">
          <el-icon>
            <Plus />
          </el-icon>
          <span>添加选项</span>
        </div>
      </div>
      <!-- 日期相关 -->
      <div class="box" v-if="newCurrentItem.options.dateFormat">
        <div v-if="type === 'date'">
          <div class="title2">
            <span>日期类型</span>
          </div>
          <el-radio-group v-model="newCurrentItem.options.dateFormat">
            <el-radio label="YYYY-MM-DD">年-月-日</el-radio>
            <el-radio label="YYYY-MM-DD A">年-月-日 上午/下午</el-radio>
            <el-radio label="YYYY-MM-DD hh:mm">年-月-日 时:分</el-radio>
            <el-radio label="YYYY-MM-DD hh:mm:ss">年-月-日 时:分:秒</el-radio>
          </el-radio-group>
        </div>


        <div v-else>
          <div class="title2">
            <span>日期格式<span class="gray-color">（时长单位）</span></span>
          </div>
          <el-radio-group v-model="newCurrentItem.options.dateFormat">
            <el-radio label="YYYY-MM-DD" @click="newCurrentItem.options.label3 = '时长 (天)'">
              年-月-日 <span class="gray-color">(天)</span>
            </el-radio>
            <el-radio label="YYYY-MM-DD A" @click="newCurrentItem.options.label3 = '时长 (天)'">
              年-月-日 上午/下午 <span class="gray-color">(天)</span>
            </el-radio>
            <el-radio label="YYYY-MM-DD hh:mm" @click="newCurrentItem.options.label3 = '时长 (小时)'">
              年-月-日 时:分 <span class="gray-color">(小时)</span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>


      <!-- 通用 -->
      <div
        class="box"
        v-if="['single-input', 'textarea', 'single-select', 'multiple-select'].includes(type)"
      >
        <!-- <div class="box2">
          <span class="title3">默认值设置</span>
          <el-switch
            size="small"
            v-model="newCurrentItem.defaultValueRequired"
            @change="showDefaultSwitch"
          />
        </div> -->
        <!-- 非选项默认值 -->
        <div
          class="default-input"
          v-if="newCurrentItem.options.defaultValueRequired && !newCurrentItem.options.selectOptions"
        >
          <el-input
            placeholder="请输入"
            :model-value="newCurrentItem.options.defaultValue"
            @input="rightPanelChangeDefaultValue($event, 'defaultValue')"
          />
        </div>
        <!-- 单选/多选 选项默认值 -->
        <div
          class="default-input"
          v-if="newCurrentItem.options.defaultValueRequired && newCurrentItem.options.selectOptions"
        >
          <el-select
            style="width: 100%"
            v-model="newCurrentItem.options.defaultValue"
            placeholder="请选择"
            :multiple="newCurrentItem.options.multiple"
          >
            <el-option
              v-show="item.value"
              v-for="item in newCurrentItem.options.selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- 金额相关 -->
      <div class="box" v-if="newCurrentItem.options.amountFormat">
        <div class="title2">格式</div>
        <el-checkbox
          v-model="newCurrentItem.options.amountFormat.showCapital"
          label="显示大写数字"
          size="large"
        />
        <el-checkbox
          v-model="newCurrentItem.options.amountFormat.showThousand"
          label="显示千位分隔符"
          size="large"
        />
        <div class="flex-box">
          <el-checkbox
            v-model="newCurrentItem.options.amountFormat.showDecimals"
            label="显示"
            size="large"
          />
          <el-input-number
            class="divider-input"
            v-model="newCurrentItem.options.amountFormat.decimalsCount"
            :min="0"
            :max="6"
            size="small"
            controls-position="right"
          />
          <span>位小数位数</span>
        </div>
        <div class="over-tip" v-show="newCurrentItem.options.amountFormat.decimalsCount === 6">
          最多只支持设置 6 位小数位数
        </div>
        <div class="preview">
          <div class="example">预览：</div>
          <div>
            <span>{{
              formatAmount(
                123456,
                newCurrentItem.options.amountFormat.showThousand,
                newCurrentItem.options.amountFormat.showDecimals,
                newCurrentItem.options.amountFormat.decimalsCount
              )
            }}</span>
            <div class="example">{{ formatCurrency(123456) }}</div>
          </div>
        </div>
      </div>
      <div class="box" v-if="type === 'amount'">
        <div class="title2">设置金额范围</div>
        <div class="flex-box">
          <el-input
            :class="{
              'is-error': judgeIsFix
            }"
            :model-value="newCurrentItem.options.minValue"
            @input="numberMinChange"
            placeholder="最小数值"
          />
          <span class="divider">至</span>
          <el-input
            :class="{
              'is-error': judgeIsFix
            }"
            :model-value="newCurrentItem.options.maxValue"
            @input="numberMaxChange"
            placeholder="最大数值"
          />
        </div>
        <div class="tip" v-show="judgeIsFix">最小值不能大于最大值</div>
      </div>
      <!-- 数字相关 -->
      <div class="box" v-if="type === 'number'">
        <div class="title2">设置数值范围</div>
        <div class="flex-box">
          <el-input
            :class="{
              'is-error': judgeIsFix
            }"
            :model-value="newCurrentItem.options.minValue"
            @input="numberMinChange"
            placeholder="最小数值"
          />
          <span class="divider">至</span>
          <el-input
            :class="{
              'is-error': judgeIsFix
            }"
            :model-value="newCurrentItem.options.maxValue"
            @input="numberMaxChange"
            placeholder="最大数值"
          />
        </div>
        <div class="tip" v-show="judgeIsFix">最小值不能大于最大值</div>
      </div>
      <!-- 部门 -->
      <div class="box" v-if="type === 'section'">
        <div class="title2">可选数量</div>
        <div class="flex-box">
          <el-radio-group v-model="newCurrentItem.options.radioValue">
            <el-radio
              :label="item.value"
              v-for="item in newCurrentItem.options.radioOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 描述文本 -->
      <div class="box" v-if="type === 'desc'">
        <div class="title2">字体大小</div>
        <div class="flex-box">
          <el-slider
            class="slider"
            v-model="newCurrentItem.options.defaultValue"
            :min="newCurrentItem.options.minValue"
            :max="newCurrentItem.options.maxValue"
            size="small"
          />
        </div>
      </div>
      <div class="box" v-if="type === 'desc'">
        <div class="title2">字体粗细</div>
        <el-checkbox v-model="newCurrentItem.options.isBold" label="加粗" />
      </div>
      <!-- 通用 -->
      <div class="box" v-if="newCurrentItem.options">
        <div class="title2">其他可选</div>
        <el-checkbox
          v-model="newCurrentItem.options.required"
          @change="requireRuleChange($event, newCurrentItem)"
          label="必填"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useStore } from "vuex";
import draggable from 'vuedraggable'
import { formatAmount, formatCurrency, numberMinChangeM, numberMaxChangeM } from '../../../../utils'
import { ElMessage } from 'element-plus'
import { useJudgeNumberRange, useJudgeOptionFit } from './hooks/judge.js'
// import { useFormStore } from '@/stores/form'

/* ts类型定义区域 */

/* 定义数据区域 */
const props = defineProps({
  currentItem: {
    type: Object,
    default: () => {}
  }
})
const store = useStore();
const newCurrentItem = ref<any>({})
const type = ref('')
const panelWidth = ref(0)
const judgeIsFix = useJudgeNumberRange(newCurrentItem) // 判断设置数值/金额时的提示警告显示/隐藏
const judgeOptionFix = useJudgeOptionFit(newCurrentItem) // 判断单选/多选时的提示警告显示/隐藏
//const formStore = useFormStore()

/* 事件处理区域 */
// 删除下拉选项处理
const closeSelectOption = (index: number) => {
  if (newCurrentItem.value.selectOptions.length === 1) {
    ElMessage({
      message: '至少需要一项',
      type: 'warning'
    })
    return
  }
  const filter = newCurrentItem.value.selectOptions.splice(index, 1)

  if (filter[0].value === newCurrentItem.value.options.defaultValue) {
    newCurrentItem.value.options.defaultValue = null
  }
}

/** 校验效果 */
const requireRuleChange = (event: any, newCurrentItem: any) => {
  let tempRules: any[] = []

  if (event) {
    tempRules = [
      {
        required: true,
        message: newCurrentItem.options.rulesConfig.messageTip,
        trigger: newCurrentItem.options.rulesConfig.trigger
      }
    ]
  } else {
    tempRules = []
  }

  newCurrentItem.options.rulesConfig.rules = tempRules
}

// 默认值切换，重置填写/选择的默认值
const showDefaultSwitch = (value: boolean) => {
  if (!value) {
    newCurrentItem.value.options.defaultValue = ''
  }
}

/** 数字相关 */
const numberMinChange = (value: string) => {
  //formStore.computeErrorContent()
  numberMinChangeM(value, newCurrentItem)
  requireRuleChange(newCurrentItem.value.options.required, newCurrentItem.value)
}

const numberMaxChange = (value: string) => {
  //formStore.computeErrorContent()
  numberMaxChangeM(value, newCurrentItem)
  requireRuleChange(newCurrentItem.value.options.required, newCurrentItem.value)
}

const rightPanelChange = (e: any, id: string) => {
  console.log(e, id,newCurrentItem.value)
  newCurrentItem.value[id] = e
  //formStore.computeErrorContent()
}

const rightPanelChangeDefaultValue = (e: any, id: string) => {
  console.log(e, id,newCurrentItem.value)
  newCurrentItem.value.options[id] = e
  //formStore.computeErrorContent()
}

/* 监听 */
watch(
  () => store.state.form.selectFormItem,
  (newVal) => {
    console.log('newVal', newVal)
    if (newVal?.name) {
      newCurrentItem.value = newVal
      type.value = newVal.type
      panelWidth.value = 300
    } else {
      newCurrentItem.value = newVal ?? {}
      panelWidth.value = 0
    }
  }
)

// watch(
//   () => props.currentItem,
//   (newVal) => {
//     console.log('newVal', newVal)
//     if (newVal?.name) {
//       newCurrentItem.value = newVal
//       type.value = newVal.type
//       panelWidth.value = 300
//     } else {
//       newCurrentItem.value = newVal ?? {}
//       panelWidth.value = 0
//     }
//   }
// )

/* 生命周期 */
</script>

<style lang="less" scoped>
.gray-color {
  color: #8f959e;
}
.right-panel {
  // width: 300px;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  transition: width 300ms;
  .title {
    font-size: 18px;
    line-height: 28px;
    color: #1f2329;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .box {
    margin-bottom: 20px;
    position: relative;
    .title2 {
      color: #1f2329;
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 8px;

      span {
        position: relative;
        &::after {
          content: '*';
          position: absolute;
          left: 100%;
          top: -2px;
          line-height: 20px;
          padding-left: 2px;
          color: #f54a45;
        }
      }
    }
    .title3 {
      margin-right: 5px;
    }
    .default-input {
      margin-bottom: 16px;
    }
    .tip {
      color: #f54a45;
      font-size: 12px;
      line-height: 32px;
      height: 20px;
      margin-bottom: 12px;
    }
    .over-tip {
      padding-left: 24px;
      color: #f54a45;
      font-size: 12px;
      line-height: 32px;
      height: 20px;
      margin-bottom: 12px;
    }
    .preview {
      display: flex;
      background: #f2f3f5;
      border-radius: 4px;
      padding: 12px 16px;
      display: flex;
      color: #1f2329;
      font-size: 14px;
      .example {
        color: #8f959e;
        font-size: 14px;
      }
    }
    .operate {
      display: flex;
      align-items: center;
      margin-left: 24px;
      color: #3370ff;
      cursor: pointer;
      span {
        margin-left: 3px;
        padding-top: 1px;
      }
    }

    .drag-li {
      margin-bottom: 10px;
    }
  }
  .box2 {
    margin-bottom: 10px;
  }
  .flex-box {
    display: flex;
    align-items: center;

    .divider {
      margin: 0 5px;
    }
    .divider-input {
      width: 100px;
      margin: 0 5px;
    }

    .divider-input2 {
      margin: 0 5px;
    }

    .icon {
      font-size: 20px;
      cursor: move;
    }

    .slider {
      margin-left: 10px;
    }
  }
}
:deep(.el-textarea__inner) {
  height: 100px;
}

// 错误提示框
.is-error {
  :deep(.el-input__wrapper) {
    box-shadow: inset 0 0 0 1px #f5222d;
  }
}
</style>
../../hooks/judge